---
title: Astroを手動でインストール
description: Astroをnpm、pnpm、Yarnを使って手動でインストールする方法です。
i18nReady: true
---
import Button from '~/components/Button.astro'
import { FileTree } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import ReadMore from '~/components/ReadMore.astro'

このガイドでは、新しいAstroプロジェクトを手動でインストールおよび設定する手順を説明します。

:::tip[もっと手軽な方法は？]
[create astro CLIウィザード](/ja/install/auto/)に従ってください。
:::

#### 前提条件

- **Node.js** - `v18.14.1` またはそれ以上。
- **テキストエディタ** - [VS Code](https://code.visualstudio.com/)と[公式Astro拡張機能](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)を推奨します。
- **ターミナル** - Astroは、コマンドラインインターフェイス（CLI）からアクセスします。

#### インストール

自動CLIツール `create astro` を使用しない場合は、以下の案内にしたがってプロジェクトを自分でセットアップできます。

## 1. ディレクトリの作成

プロジェクト名で空のディレクトリを作成し、その中に移動します。

```bash
mkdir my-astro-project
cd my-astro-project
```

新しいディレクトリに移動したら、プロジェクトの `package.json` ファイルを作成します。これはAstroを含むプロジェクトの依存関係を管理する方法です。このファイル形式に馴染みがない場合は、以下のコマンドを実行して作成してください。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm init --yes
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm init 
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn init --yes
  ```
  </Fragment>
</PackageManagerTabs>

## 2. Astroのインストール

まず、Astroプロジェクトの依存関係をプロジェクト内にインストールします。

:::note[重要]
Astroはグローバルではなく、ローカルにインストールする必要があります。`npm install -g astro`や`pnpm add -g astro`、`yarn add global astro`を「実行していない」ことを確認してください。
:::

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install astro
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add astro
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add astro
  ```
  </Fragment>
</PackageManagerTabs>

次に、`package.json` のプレースホルダー "scripts" セクションを、以下のように置き換えます。

```json title="package.json" del={2} ins={3-6}
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
```

これらのスクリプトは、後ほどAstroの起動や各種コマンドの実行に使用します。

## 3. 最初のページを作成

テキストエディタで、ディレクトリ内の`src/pages/index.astro`に新しいファイルを作成します。これがプロジェクトにおける最初のAstroのページとなります。

このガイドでは、次のコードスニペット（`---`のダッシュを含む）を新しいファイルにコピー＆ペーストします。

```astro title="src/pages/index.astro"
---
// Astroへようこそ！この3つのダッシュで囲まれた部分のコードが、
// 「コンポーネントフロントマター」です。ブラウザで実行されることはありません。
console.log('これはブラウザではなく、ターミナルで実行されます！');
---
<!-- 以下は「コンポーネントテンプレート」です。これは単なるHTMLですが
     しかし、優れたテンプレートを作成するための魔法がいくつか散りばめられています。 -->
<html>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>
<style>
  h1 {
    color: orange;
  }
</style>
```

## 4. 最初の静的アセットを作成

静的アセットを格納するために、`public/` ディレクトリも作成する必要があります。Astroはこれらのアセットを常に最終ビルドに含めますので、コンポーネントテンプレートの内部から安全に参照できます。

テキストエディタで、ディレクトリ内の `public/robots.txt` に新しいファイルを作成します。`robots.txt` は、ほとんどのサイトがGoogleなどの検索ボットにあなたのサイトをどのように扱うかを伝えるために含める簡単なファイルです。

このガイドでは、次のコードスニペットを新しいファイルにコピー＆ペーストしてください。

```diff title="public/robots.txt"
# 例: すべてのボットにサイトのスキャンとインデックスを許可する。
# 完全な構文: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
User-agent: *
Allow: /
```

## 5. `astro.config.mjs` の作成

Astroの設定は、`astro.config.mjs` を使用します。このファイルは、Astroの設定が必要ない場合は任意ですが、今すぐ作成することをお勧めします。

プロジェクトのルートに `astro.config.mjs` を作成し、その中に以下のコードをコピーします。

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({});
```

ReactやSvelteなどの[UIフレームワークコンポーネント](/ja/guides/framework-components/)や、TailwindやPartytownなどのツールをプロジェクトに組み込む場合は、ここで[手動でインテグレーションを取り込んで設定](/ja/guides/integrations-guide/)します。

<ReadMore>詳しくはAstroの[API設定リファレンス](/ja/reference/configuration-reference/)を参照してください。</ReadMore>

## 6. TypeScriptのサポートを追加

TypeScriptは`tsconfig.json`を使って設定します。TypeScriptのコードを書かない場合でも、AstroやVS Codeなどのツールがプロジェクトを理解するために、このファイルは重要です。いくつかの機能（npmパッケージのインポートなど）は、`tsconfig.json`ファイルがないとエディタで完全にサポートされません。

TypeScriptのコードを書く予定がある場合は、Astroの`strict`または`strictest`テンプレートを使うことを推奨します。3つのテンプレートの構成は、[astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/)で確認・比較できます。

プロジェクトのルートに`tsconfig.json`を作成し、その中に以下のコードをコピーします。（TypeScriptのテンプレートには、`base`、`strict`、`strictest`のいずれかを使用できます）

```json title="tsconfig.json" "base"
{
  "extends": "astro/tsconfigs/base"
}
```

最後に、`src/env.d.ts`を作成し、Astroプロジェクトで利用できる型をTypeScriptに知らせます。

```ts title="src/env.d.ts"
/// <reference types="astro/client" />
```

<ReadMore>詳しくはAstroの[TypeScriptセットアップガイド](/ja/guides/typescript/#準備)をお読みください。</ReadMore>

## 7. 次のステップ

上記の手順を踏んだ場合、プロジェクトディレクトリは以下のようになっているはずです。

<FileTree>
- node_modules/
- public/
  - robots.txt
- src/
  - pages/
    - index.astro
  - env.d.ts
- astro.config.mjs
- package-lock.json または`yarn.lock`、`pnpm-lock.yaml`など。
- package.json
- tsconfig.json
</FileTree>

おめでとうございます！これでAstroを使うための設定は完了です。

このガイドにすべてしたがった場合は、[ステップ2: Astroをスタートする](/ja/install/auto/#2-astroをスタートする-)に直接ジャンプして、Astroをはじめて実行する方法を続けて学べます。
